<template>
	<view class="mine tn-safe-area-inset-bottom">

		<!-- 顶部自定义导航 -->
		<tn-nav-bar :isBack="false" :bottomShadow="false" backgroundColor="none">
			<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left" @click="tn('/minePages/set')">
				<view class="custom-nav__back">
					<view class="tn-icon-set tn-color-cat" style="font-size: 50rpx;" @click="settingManager">
						<!-- <tn-badge backgroundColor="#E72F8C" fontColor="#FFFFFF" :absolute="true" :translateCenter="false">
              <text>12</text>
            </tn-badge> -->
					</view>
				</view>
			</view>
		</tn-nav-bar>

		<view class="top-backgroup">
			<image src='https://resource.tuniaokj.com/images/my/my-bg4.png' mode='widthFix' class='backgroud-image'>
			</image>
		</view>

		<view class="about__wrap" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
			<!-- 图标logo/头像 -->
			<template v-if="loginStatus">
				<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom"
					style="margin-top: -450rpx;">
					<view class="justify-content-item">
						<view class="tn-flex tn-flex-col-center tn-flex-row-left">
							<view class="logo-pic tn-shadow">
								<view class="logo-image">
									<view class="tn-shadow-blur" :style="{'background-image':'url('+ userInfo.avatar +')',
										width: '110rpx',
										height: '110rpx',
										'background-size': 'cover'
									}">
									</view>
								</view>
							</view>
							<view class="tn-padding-right">
								<view class="tn-padding-right tn-padding-left-sm">
									<text class="tn-color-cat tn-text-xl tn-text-bold">{{userInfo.nickName}}</text>
									<text class=" tn-round tn-text-xs tn-bg-red tn-color-white tn-margin-left-sm"
										style="padding: 10rpx 20rpx;">
										VIP客户
									</text>
								</view>
								<view class="tn-padding-right tn-padding-top-xs tn-padding-left-sm tn-text-ellipsis">
									<text class="tn-color-gray">{{userInfo.phonenumber}}</text>
								</view>
							</view>

						</view>
					</view>
					<view class="justify-content-item" @click="tn('/minePages/set')">
						<view class="tn-icon-right tn-color-gray">
						</view>
					</view>
				</view>

			</template>
			<template v-else>
				<!-- 没有授权，则显示这个授权按钮-->
				<view class="tn-flex tn-flex-row-between" style="margin-top: -450rpx;" @click="loginManager">
					<view class="tn-flex-1 justify-content-item tn-margin-xs tn-text-center">
						<tn-button shape="round" backgroundColor="#1D2541" fontColor="#ffffff" padding="20rpx 0"
							width="40%" shadow>
							<text class="tn-icon-wechat tn-padding-right-xs tn-text-xl"></text>
							<text class="">授权登录</text>
						</tn-button>
					</view>
				</view>
			</template>

			<!-- 方式15 start-->
			<view class="tn-flex tn-flex-row-between tn-bg-white about-shadow tn-margin-top-xl">
				<!-- 1. 地址本 -->
				<view class="tn-padding-sm tn-margin-xs"
					@click="navDirectTo('/pages/center/addressList/addressListBooks')">
					<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center tn-margin-left">
						<view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur"
							style="background-color: #F3F2F7;color: #7C8191;">
							<view class="tn-icon-empty-address"></view>
						</view>
						<view class="tn-text-center">
							<text class="tn-text-ellipsis">我的地址本</text>
						</view>
					</view>
				</view>
				<!-- 2.优惠券 -->
				<view class="tn-padding-sm tn-margin-xs" @click="navDirectTo('/pages/center/couponList/couponList')">
					<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
						<view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur"
							style="background-color: #F3F2F7;color: #7C8191;">
							<view class="tn-icon-coupon"></view>
						</view>
						<view class="tn-text-center">
							<text class="tn-text-ellipsis">优惠券</text>
						</view>
					</view>
				</view>
				<!-- 3.我的运单 -->
				<view class="tn-padding-sm tn-margin-xs" @click="directMyOrderManager">
					<view
						class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center tn-margin-right">
						<view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur"
							style="background-color: #F3F2F7;color: #7C8191;">
							<view class="tn-icon-order"></view>
						</view>
						<view class="tn-text-center">
							<text class="tn-text-ellipsis">我的运单</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 方式15 end-->


			<!-- 更多信息-->
			<!-- 方式12 start-->
			<view class="about-shadow tn-margin-top-lg tn-padding-top-sm tn-padding-bottom-sm tn-bg-white">
				<view class="tn-flex tn-flex-row-center tn-radius tn-padding-top">
					<view class="tn-padding-sm tn-margin-xs tn-radius"  open-type="contact">
						<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
							<view
								class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-grey--light">
								<view class="tn-icon-service-simple"></view>
							</view>
							<view class="tn-text-center">
								<text class="tn-text-ellipsis">在线客服</text>
							</view>
						</view>
					</view>
					<view class="tn-padding-sm tn-margin-xs tn-radius" @click="navDirectTo('/pages/center/feedback/feedback')">
						<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
							<view
								class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-grey--light">
								<view class="tn-icon-message tn-color-cat"></view>
							</view>
							<view class="tn-text-center">
								<text class="tn-text-ellipsis">问题反馈</text>
							</view>
						</view>
					</view>
					<view class="tn-padding-sm tn-margin-xs tn-radius" @click="navDirectTo('/pages/center/about/about')">
						<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
							<view
								class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-grey--light">
								<view class="tn-icon-share tn-color-cat"></view>
							</view>
							<view class="tn-text-center">
								<text class="tn-text-ellipsis">关于我们</text>
							</view>
						</view>
					</view>
					<view class="tn-padding-sm tn-margin-xs tn-radius" @click="navDirectTo('/pages/center/expressConpany/index')">
						<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
							<view
								class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-bg-grey--light">
								<view class="tn-icon-company tn-color-cat"></view>
							</view>
							<view class="tn-text-center">
								<text class="tn-text-ellipsis">支持快递公司</text>
							</view>
						</view>
					</view>
				</view>
			</view>


			<!-- 更多信息-->
			<view class="about-shadow tn-margin-top-lg tn-margin-bottom-lg tn-padding-top-sm tn-padding-bottom-sm">
				<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
					<button class="tn-flex tn-flex-col-center tn-button--clear-style" open-type="contact">
						<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center"
							style="color: #7C8191;">
							<view class="tn-icon-wechat-fill"></view>
						</view>
						<view class="tn-flex tn-flex-row-between" style="width: 100%;">
							<view class="tn-margin-left-sm">合作勾搭</view>
							<view class="tn-color-gray tn-icon-right"></view>
						</view>
					</button>
				</tn-list-cell>
				<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
					<button class="tn-flex tn-flex-col-center tn-button--clear-style" open-type="feedback">
						<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center"
							style="color: #7C8191;">
							<view class="tn-icon-message-fill"></view>
						</view>
						<view class="tn-flex tn-flex-row-between" style="width: 100%;">
							<view class="tn-margin-left-sm">问题反馈</view>
							<view class="tn-color-gray tn-icon-right"></view>
						</view>
					</button>
				</tn-list-cell>
				<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" @click="callPhoneNumber"
					data-number="18266666666">
					<view class="tn-flex tn-flex-col-center">
						<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center"
							style="color: #7C8191;">
							<view class="tn-icon-tel-circle-fill"></view>
						</view>
						<view class="tn-margin-left-sm tn-flex-1">技术支持</view>
						<view
							class="tn-margin-left-sm tn-color-cat tn-text-sm tn-padding-left-xs tn-padding-right-xs tn-bg-gray--light tn-round">
							技术支持电话
						</view>
					</view>
				</tn-list-cell>
			</view>

		</view>

		<view class='tn-tabbar-height'></view>

	</view>
</template>

<script>
	import wxUrlConfig from '@/common/config.js'
	
	export default {
		name: 'Mine',
		components: {
		},
		
		data() {
			return {
				// 登录状态
				loginStatus: false,
				// 2.用户信息
				userInfo: null,
			}
		},
		methods: {
			// 登录成功方法
			loginSuccessManager() {
				this.loginStatus = true;
				this.userInfo = getApp().globalData;
			},

			// 震动跳转
			navDirectTo(e) {
				wx.vibrateShort();
				uni.navigateTo({
					url: e
				})
			},

			// 登录方法
			loginManager() {
				this.$emit('actionEventManager', 'login');
			},
			
			// 跳转到我的订单页面
			directMyOrderManager(){
				this.$emit('actionEventManager','directToOrder');
			},

			// 跳转到图鸟官网
			navTuniaoWebsite() {
				
			},
			// 跳转到图鸟UI
			navTuniaoUI() {
				uni.navigateToMiniProgram({
					appId: 'wxf3d81a452b88ff4b'
				})
			},
			
			
			// 跳转
			tn(e) {
				uni.navigateTo({
					url: e,
				});
			},
			// 收货地址
			navAddress() {
				uni.chooseAddress({})
			},

			//拨打固定电话
			callPhoneNumber() {
				uni.makePhoneCall({
					phoneNumber: wxUrlConfig.centerPhone,
				});
			},
		
			
			// 设置方法
			settingManager(){
				uni.navigateTo({
					url:'/pages/center/setting/setting'
				})
			},
		
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/tuniao-ui/tnSmart.scss';

	.mine {
		max-height: 100vh;
	}
</style>